<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Vito - Responsive Bootstrap 4 Admin Dashboard Template</title>
      <!-- Favicon -->
      <link rel="shortcut icon" href="images/favicon.ico" />
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <!-- Typography CSS -->
      <link rel="stylesheet" href="css/typography.css">
      <!-- Style CSS -->
      <link rel="stylesheet" href="css/style.css">
      <!-- Responsive CSS -->
      <link rel="stylesheet" href="css/responsive.css">
   </head>
   <body>
      <!-- loader Start -->
      <div id="loading">
         <div id="loading-center">
         </div>
      </div>
      <!-- loader END -->
      <!-- Wrapper Start -->
      <div class="wrapper">
      <!-- Sidebar  -->
      <div class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a href="index.html">
               <img src="images/logo.gif" class="img-fluid" alt="">
               <span>Vito</span>
               </a>
               <div class="iq-menu-bt-sidebar">
                     <div class="iq-menu-bt align-self-center">
                        <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-arrow-left-s-line"></i></div>
                        <div class="hover-circle"><i class="ri-arrow-right-s-line"></i></div>
                     </div>
                     </div>
                  </div>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">
                     <li class="iq-menu-title"><i class="ri-subtract-line"></i><span>Dashboard</span></li>
                     <li>
                        <a href="index.html" class="iq-waves-effect"><i class="ri-home-4-line"></i><span>Dashboard 1</span></a>
                     </li>
                     <li>
                        <a href="dashboard-1.html" class="iq-waves-effect"><i class="ri-home-3-line"></i><span>Dashboard 2</span></a>
                     </li>
                     <li class="iq-menu-title"><i class="ri-subtract-line"></i><span>Apps</span></li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-mail-line"></i><span>Email</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="app/index.html"><i class="ri-inbox-line"></i>Inbox</a></li>
                           <li><a href="app/email-compose.html"><i class="ri-edit-line"></i>Email Compose</a></li>
                        </ul>
                     </li>
                     <li class="active"><a href="todo.html" class="iq-waves-effect"><i class="ri-chat-check-line"></i><span>Todo</span></a></li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-user-line"></i><span>User</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="profile.html"><i class="ri-profile-line"></i>User Profile</a></li>
                           <li><a href="profile-edit.html"><i class="ri-file-edit-line"></i>User Edit</a></li>
                           <li><a href="add-user.html"><i class="ri-user-add-line"></i>User Add</a></li>
                           <li><a href="user-list.html"><i class="ri-file-list-line"></i>User List</a></li>
                        </ul>
                     </li>
                     <li><a href="calendar.html" class="iq-waves-effect"><i class="ri-calendar-2-line"></i><span>Calendar</span></a></li>
                     <li><a href="chat.html" class="iq-waves-effect"><i class="ri-message-line"></i><span>Chat</span></a></li>
                     <li><a href="#" class="iq-waves-effect"><i class="ri-shopping-cart-line"></i><span>eCommerce</span><small class="badge badge-pill badge-primary float-right font-weight-normal ml-auto">Soon</small></a></li>
                     <li class="iq-menu-title"><i class="ri-subtract-line"></i><span>Components</span></li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-pencil-ruler-line"></i><span>UI Elements</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="ui-colors.html"><i class="ri-font-color"></i>colors</a></li>
                           <li><a href="ui-typography.html"><i class="ri-text"></i>Typography</a></li>
                           <li><a href="ui-alerts.html"><i class="ri-alert-line"></i>Alerts</a></li>
                           <li><a href="ui-badges.html"><i class="ri-building-3-line"></i>Badges</a></li>
                           <li><a href="ui-breadcrumb.html"><i class="ri-menu-2-line"></i>Breadcrumb</a></li>
                           <li><a href="ui-buttons.html"><i class="ri-checkbox-blank-line"></i>Buttons</a></li>
                           <li><a href="ui-cards.html"><i class="ri-bank-card-line"></i>Cards</a></li>
                           <li><a href="ui-carousel.html"><i class="ri-slideshow-line"></i>Carousel</a></li>
                           <li><a href="ui-embed-video.html"><i class="ri-slideshow-2-line"></i>Video</a></li>
                           <li><a href="ui-grid.html"><i class="ri-grid-line"></i>Grid</a></li>
                           <li><a href="ui-images.html"><i class="ri-image-line"></i>Images</a></li>
                           <li><a href="ui-list-group.html"><i class="ri-file-list-3-line"></i>list Group</a></li>
                           <li><a href="ui-media-object.html"><i class="ri-camera-line"></i>Media</a></li>
                           <li><a href="ui-modal.html"><i class="ri-stop-mini-line"></i>Modal</a></li>
                           <li><a href="ui-notifications.html"><i class="ri-notification-line"></i>Notifications</a></li>
                           <li><a href="ui-pagination.html"><i class="ri-pages-line"></i>Pagination</a></li>
                           <li><a href="ui-popovers.html"><i class="ri-folder-shield-2-line"></i>Popovers</a></li>
                           <li><a href="ui-progressbars.html"><i class="ri-battery-low-line"></i>Progressbars</a></li>
                           <li><a href="ui-tabs.html"><i class="ri-database-line"></i>Tabs</a></li>
                           <li><a href="ui-tooltips.html"><i class="ri-record-mail-line"></i>Tooltips</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-profile-line"></i><span>Forms</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="form-layout.html"><i class="ri-tablet-line"></i>Form Elements</a></li>
                           <li><a href="form-validation.html"><i class="ri-device-line"></i>Form Validation</a></li>
                           <li><a href="form-switch.html"><i class="ri-toggle-line"></i>Form Switch</a></li>
                           <li><a href="form-chechbox.html"><i class="ri-checkbox-line"></i>Form Checkbox</a></li>
                           <li><a href="form-radio.html"><i class="ri-radio-button-line"></i>Form Radio</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-archive-drawer-line"></i><span>Forms Wizard</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="form-wizard.html"><i class="ri-clockwise-line"></i>Simple Wizard</a></li>
                           <li><a href="form-wizard-validate.html"><i class="ri-clockwise-2-line"></i>Validate Wizard</a></li>
                           <li><a href="form-wizard-vertical.html"><i class="ri-anticlockwise-line"></i>Vertical Wizard</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-table-line"></i><span>Table</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="tables-basic.html"><i class="ri-table-line"></i>Basic Tables</a></li>
                           <li><a href="data-table.html"><i class="ri-database-line"></i>Data Table</a></li>
                           <li><a href="table-editable.html"><i class="ri-refund-line"></i>Editable Table</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-pie-chart-box-line"></i><span>Charts</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="chart-morris.html"><i class="ri-file-chart-line"></i>Morris Chart</a></li>
                           <li><a href="chart-high.html"><i class="ri-bar-chart-line"></i>High Charts</a></li>
                           <li><a href="chart-am.html"><i class="ri-folder-chart-line"></i>Am Charts</a></li>
                           <li><a href="chart-apex.html"><i class="ri-folder-chart-2-line"></i>Apex Chart</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-list-check"></i><span>Icons</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="icon-dripicons.html"><i class="ri-stack-line"></i>Dripicons</a></li>
                           <li><a href="icon-fontawesome-5.html"><i class="ri-facebook-fill"></i>Font Awesome 5</a></li>
                           <li><a href="icon-lineawesome.html"><i class="ri-keynote-line"></i>line Awesome</a></li>
                           <li><a href="icon-remixicon.html"><i class="ri-remixicon-line"></i>Remixicon</a></li>
                           <li><a href="icon-unicons.html"><i class="ri-underline"></i>unicons</a></li>
                        </ul>
                     </li>
                     <li class="iq-menu-title"><i class="ri-subtract-line"></i><span>Pages</span></li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-pages-line"></i><span>Authentication</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="sign-in.html"><i class="ri-login-box-line"></i>Login</a></li>
                           <li><a href="sign-up.html"><i class="ri-login-circle-line"></i>Register</a></li>
                           <li><a href="pages-recoverpw.html"><i class="ri-record-mail-line"></i>Recover Password</a></li>
                           <li><a href="pages-confirm-mail.html"><i class="ri-file-code-line"></i>Confirm Mail</a></li>
                           <li><a href="pages-lock-screen.html"><i class="ri-lock-line"></i>Lock Screen</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-map-pin-user-line"></i><span>Maps</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="pages-map.html"><i class="ri-google-line"></i>Google Map</a></li>
                           <li><a href="#"><i class="ri-map-pin-range-line"></i>Vector Map</a></li>
                        </ul>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-pantone-line"></i><span>Extra Pages</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                           <li><a href="pages-timeline.html"><i class="ri-map-pin-time-line"></i>Timeline</a></li>
                           <li><a href="pages-invoice.html"><i class="ri-question-answer-line"></i>Invoice</a></li>
                           <li><a href="blank-page.html"><i class="ri-invision-line"></i>Blank Page</a></li>
                           <li><a href="pages-error.html"><i class="ri-error-warning-line"></i>Error 404</a></li>
                           <li><a href="pages-error-500.html"><i class="ri-error-warning-line"></i>Error 500</a></li>
                           <li><a href="pages-pricing.html"><i class="ri-price-tag-line"></i>Pricing</a></li>
                           <li><a href="pages-pricing-one.html"><i class="ri-price-tag-2-line"></i>Pricing 1</a></li>
                           <li><a href="pages-maintenance.html"><i class="ri-archive-line"></i>Maintenance</a></li>
                           <li><a href="pages-comingsoon.html"><i class="ri-mastercard-line"></i>Coming Soon</a></li>
                           <li><a href="pages-faq.html"><i class="ri-compasses-line"></i>Faq</a></li>
                        </ul>
                     </li>
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>
      <!-- TOP Nav Bar -->
      <div class="iq-top-navbar">
            <div class="iq-navbar-custom">
               <div class="iq-sidebar-logo">
                  <div class="top-logo">
                     <a href="index.html" class="logo">
                     <img src="images/logo.gif" class="img-fluid" alt="">
                     <span>vito</span>
                     </a>
                  </div>
               </div>
               <nav class="navbar navbar-expand-lg navbar-light p-0">
                  <div class="iq-search-bar">
                     <form action="#" class="searchbox">
                        <input type="text" class="text search-input" placeholder="Type here to search...">
                        <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                     </form>
                  </div>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="ri-menu-3-line"></i>
                  </button>
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-arrow-left-s-line"></i></div>
                        <div class="hover-circle"><i class="ri-arrow-right-s-line"></i></div>
                     </div>
                  </div>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav ml-auto navbar-list">
                        <li class="nav-item">
                           <a class="search-toggle iq-waves-effect language-title" href="#"><img src="images/small/flag-01.png" alt="img-flaf" class="img-fluid mr-1" style="height: 16px; width: 16px;" /> English <i class="ri-arrow-down-s-line"></i></a>
                           <div class="iq-sub-dropdown">
                              <a class="iq-sub-card" href="#"><img src="images/small/flag-02.png" alt="img-flaf" class="img-fluid mr-2" />French</a>
                              <a class="iq-sub-card" href="#"><img src="images/small/flag-03.png" alt="img-flaf" class="img-fluid mr-2" />Spanish</a>
                              <a class="iq-sub-card" href="#"><img src="images/small/flag-04.png" alt="img-flaf" class="img-fluid mr-2" />Italian</a>
                              <a class="iq-sub-card" href="#"><img src="images/small/flag-05.png" alt="img-flaf" class="img-fluid mr-2" />German</a>
                              <a class="iq-sub-card" href="#"><img src="images/small/flag-06.png" alt="img-flaf" class="img-fluid mr-2" />Japanese</a>

                           </div>
                        </li>
                        <li class="nav-item">
                           <a class="search-toggle iq-waves-effect" href="#"><i class="ri-calendar-line"></i></a>
                           <div class="iq-sub-dropdown">
                              <div class="calender-small"></div>
                           </div>
                        </li>
                        <li class="nav-item">
                           <a href="#" class="search-toggle iq-waves-effect">
                              <div id="lottie-beil"></div>
                              <span class="bg-danger dots"></span>
                           </a>
                           <div class="iq-sub-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="bg-primary p-3">
                                       <h5 class="mb-0 text-white">All Notifications<small class="badge  badge-light float-right pt-1">4</small></h5>
                                    </div>

                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="images/user/01.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Emma Watson Nik</h6>
                                             <small class="float-right font-size-12">Just Now</small>
                                             <p class="mb-0">95 MB</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="images/user/02.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">New customer is join</h6>
                                             <small class="float-right font-size-12">5 days ago</small>
                                             <p class="mb-0">Jond Nik</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="images/user/03.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Two customer is left</h6>
                                             <small class="float-right font-size-12">2 days ago</small>
                                             <p class="mb-0">Jond Nik</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="images/user/04.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">New Mail from Fenny</h6>
                                             <small class="float-right font-size-12">3 days ago</small>
                                             <p class="mb-0">Jond Nik</p>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="nav-item dropdown">
                           <a href="#" class="search-toggle iq-waves-effect">
                             <div id="lottie-mail"></div>
                              <span class="bg-primary count-mail"></span>
                           </a>
                           <div class="iq-sub-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="bg-primary p-3">
                                       <h5 class="mb-0 text-white">All Messages<small class="badge  badge-light float-right pt-1">5</small></h5>
                                    </div>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="images/user/01.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Nik Emma Watson</h6>
                                             <small class="float-left font-size-12">13 Jun</small>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="images/user/02.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Lorem Ipsum Watson</h6>
                                             <small class="float-left font-size-12">20 Apr</small>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="images/user/03.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Why do we use it?</h6>
                                             <small class="float-left font-size-12">30 Jun</small>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="images/user/04.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Variations Passages</h6>
                                             <small class="float-left font-size-12">12 Sep</small>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="images/user/05.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Lorem Ipsum generators</h6>
                                             <small class="float-left font-size-12">5 Dec</small>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <ul class="navbar-list">
                     <li>
                        <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                           <img src="images/user/1.jpg" class="img-fluid rounded mr-3" alt="user">
                           <div class="caption">
                              <h6 class="mb-0 line-height">Nik jone</h6>
                              <span class="font-size-12">Available</span>
                           </div>
                        </a>
                        <div class="iq-sub-dropdown iq-user-dropdown">
                           <div class="iq-card shadow-none m-0">
                              <div class="iq-card-body p-0 ">
                                 <div class="bg-primary p-3">
                                    <h5 class="mb-0 text-white line-height">Hello Nik jone</h5>
                                    <span class="text-white font-size-12">Available</span>
                                 </div>
                                 <a href="profile.html" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-file-user-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">My Profile</h6>
                                          <p class="mb-0 font-size-12">View personal profile details.</p>
                                       </div>
                                    </div>
                                 </a>
                                 <a href="profile-edit.html" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-profile-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">Edit Profile</h6>
                                          <p class="mb-0 font-size-12">Modify your personal details.</p>
                                       </div>
                                    </div>
                                 </a>
                                 <a href="account-setting.html" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-account-box-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">Account settings</h6>
                                          <p class="mb-0 font-size-12">Manage your account parameters.</p>
                                       </div>
                                    </div>
                                 </a>
                                 <a href="privacy-setting.html" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-lock-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">Privacy Settings</h6>
                                          <p class="mb-0 font-size-12">Control your privacy parameters.</p>
                                       </div>
                                    </div>
                                 </a>
                                 <div class="d-inline-block w-100 text-center p-3">
                                    <a class="bg-primary iq-sign-btn" href="sign-in.html" role="button">Sign out<i class="ri-login-box-line ml-2"></i></a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
               </nav>

            </div>
         </div>
      <!-- TOP Nav Bar END -->
      <!-- Page Content  -->
      <div id="content-page" class="content-page">
         <div class="container-fluid relative">
            <div class="row">
               <div class="col-lg-3">
                  <div class="iq-card">
                     <div class="iq-card-body">
                        <div class="iq-todo-page">
                           <form class="position-relative">
                              <div class="form-group mb-0">
                                 <input type="text" class="form-control todo-search" id="exampleInputEmail002"  placeholder="Search">
                                 <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                              </div>
                           </form>
                           <div class="add-new-project mt-3 mb-3">
                              <a href="javascript:void();" class="d-block nrw-project"><i class="ri-add-line mr-2"></i>add Project</a>
                           </div>
                           <ul class="todo-task-list p-0 m-0">
                              <li class=""><a href="javascript:void();"><i class="ri-stack-fill mr-2"></i> Secrat Project</a>
                                 <ul id="todo-task1" class="sub-task  show mt-2 p-0">
                                    <li class="active"><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-success"></i> All Task </a></li>
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-warning"></i> People </a></li>
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-danger"></i> Files <span class="badge badge-danger ml-2 float-right">44</span> </a></li>
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-primary"></i> Statistics </a></li>
                                 </ul>
                              </li>
                              <li><a href="javascript:void();"><i class="ri-stack-fill mr-2"></i> Nike Mobile App</a>
                                 <ul id="todo-task2" class="sub-task  mt-2 p-0">
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-success"></i> All Task </a></li>
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-warning"></i> People </a></li>
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-danger"></i> Files <span class="badge badge-danger ml-2 float-right">20</span> </a></li>
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-primary"></i> Statistics </a></li>
                                 </ul>
                              </li>
                              <li><a href="javascript:void();"><i class="ri-stack-fill mr-2"></i> New Portfolio Site</a>
                                 <ul id="todo-task3" class="sub-task  mt-2 p-0">
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-success"></i> All Task </a></li>
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-warning"></i> People </a></li>
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-danger"></i> Files <span class="badge badge-danger ml-2 float-right">10</span> </a></li>
                                    <li><a href="javascript:void();"><i class="ri-checkbox-blank-circle-fill text-primary"></i> Statistics </a></li>
                                 </ul>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-lg-9">
                  <div class="row">
                     <div class="col-sm-12">
                        <div class="iq-card">
                           <div class="iq-card-body">
                              <div class="d-flex justify-content-between align-items-center">
                                 <div class="todo-date d-flex mr-3">
                                    <i class="ri-calendar-2-line text-success mr-2"></i>
                                    <span>Wednesday, 08th January, 2020</span>
                                 </div>
                                 <div class="todo-notification d-flex align-items-center">
                                    <div class="notification-icon position-relative d-flex align-items-center mr-3">
                                       <a href="#"><i class="ri-notification-3-line font-size-16"></i></a>
                                       <span class="bg-danger text-white">5</span></div>
                                    <button type="submit" class="btn iq-bg-success">Add Task</button>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-md-8">
                        <div class="iq-card">
                           <div class="iq-card-body p-0">
                              <ul class="todo-task-lists m-0 p-0">
                                 <li class="d-flex align-items-center p-3">
                                    <div class="user-img img-fluid"><img src="images/user/01.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                    <div class="media-support-info ml-3">
                                       <h6 class="d-inline-block">Landing page for secret Project</h6><span class="badge badge-warning ml-3 text-white">expirinq</span>
                                       <p class="mb-0">by Danlel Cllfferton</p>
                                    </div>
                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                       <div class="custom-control custom-checkbox">
                                          <input type="checkbox" name="todo-check" class="custom-control-input" id="check1">
                                          <label class="custom-control-label" for="check1"></label>
                                       </div>
                                    </div>
                                 </li>
                                 <li class="d-flex align-items-center p-3 active-task">
                                    <div class="user-img img-fluid"><img src="images/user/01.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                    <div class="media-support-info ml-3">
                                       <h6>Fix Critical Crashes</h6>
                                       <p class="mb-0">by Cralg Danles</p>
                                    </div>
                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                       <div class="custom-control custom-checkbox">
                                          <input type="checkbox" name="todo-check" class="custom-control-input" id="check2" checked="checked">
                                          <label class="custom-control-label" for="check2"></label>
                                       </div>
                                    </div>
                                 </li>
                                 <li class="d-flex align-items-center p-3">
                                    <div class="user-img img-fluid"><img src="images/user/02.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                    <div class="media-support-info ml-3">
                                       <h6 class="d-inline-block">IOS App - Redesign the contact form screen</h6><span class="badge badge-success ml-3">ending</span>
                                       <p class="mb-0">by Simona Gomez </p>
                                    </div>
                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                       <div class="custom-control custom-checkbox">
                                          <input type="checkbox" name="todo-check" class="custom-control-input" id="check3">
                                          <label class="custom-control-label" for="check3"></label>
                                       </div>
                                    </div>
                                 </li>
                                 <li class="d-flex align-items-center p-3">
                                    <div class="user-img img-fluid"><img src="images/user/03.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                    <div class="media-support-info ml-3">
                                       <h6>Final Meetup for the Secrat Project Client</h6>
                                       <p class="mb-0">bt Serena Gemoz</p>
                                    </div>
                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                       <div class="custom-control custom-checkbox">
                                          <input type="checkbox" name="todo-check" class="custom-control-input" id="check4">
                                          <label class="custom-control-label" for="check4"></label>
                                       </div>
                                    </div>
                                 </li>
                                 <li class="d-flex align-items-center p-3">
                                    <div class="user-img img-fluid"><img src="images/user/04.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                    <div class="media-support-info ml-3">
                                       <h6>Code the Parsing Element</h6>
                                       <p class="mb-0">by Jeena Gaze</p>
                                    </div>
                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                       <div class="custom-control custom-checkbox">
                                          <input type="checkbox" name="todo-check" class="custom-control-input" id="check5">
                                          <label class="custom-control-label" for="check5"></label>
                                       </div>
                                    </div>
                                 </li>
                                 <li class="d-flex align-items-center p-3">
                                    <div class="user-img img-fluid"><img src="images/user/05.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                    <div class="media-support-info ml-3">
                                       <h6 class="d-inline-block">Test the Bug, that causes design troubleshooting</h6><span class="badge badge-danger ml-3">urgent</span>
                                       <p class="mb-0">by migule Slimmonas</p>
                                    </div>
                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                       <div class="custom-control custom-checkbox">
                                          <input type="checkbox" name="todo-check" class="custom-control-input" id="check6">
                                          <label class="custom-control-label" for="check6"></label>
                                       </div>
                                    </div>
                                 </li>
                                 <li class="d-flex align-items-center p-3">
                                    <div class="user-img img-fluid"><img src="images/user/06.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                    <div class="media-support-info ml-3">
                                       <h6>Android App Design</h6>
                                       <p class="mb-0">by Becky Dimes</p>
                                    </div>
                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                       <div class="custom-control custom-checkbox">
                                          <input type="checkbox" name="todo-check" class="custom-control-input" id="check7">
                                          <label class="custom-control-label" for="check7"></label>
                                       </div>
                                    </div>
                                 </li>
                                 <li class="d-flex align-items-center p-3">
                                    <div class="user-img img-fluid"><img src="images/user/07.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                    <div class="media-support-info ml-3">
                                       <h6>Skype Meetup with clients</h6>
                                       <p class="mb-0">by James Romero</p>
                                    </div>
                                    <div class="iq-card-header-toolbar d-flex align-items-center">
                                       <div class="custom-control custom-checkbox">
                                          <input type="checkbox" name="todo-check" class="custom-control-input" id="check8">
                                          <label class="custom-control-label" for="check8"></label>
                                       </div>
                                    </div>
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="iq-card">
                           <div class="iq-card-body">
                              <div class="iq-todo-right">
                                 <form class="position-relative">
                                    <div class="form-group mb-0">
                                       <input type="text" class="form-control todo-search" id="exampleInputEmail001" placeholder="Search">
                                       <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                                    </div>
                                 </form>
                                 <div class="iq-todo-friendlist mt-3">
                                    <ul class="suggestions-lists m-0 p-0">
                                       <li class="d-flex mb-4 align-items-center">
                                          <div class="user-img img-fluid"><img src="images/user/01.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                          <div class="media-support-info ml-3">
                                             <h6>Paul Molive</h6>
                                             <p class="mb-0">Web Designer</p>
                                          </div>
                                          <div class="iq-card-header-toolbar d-flex align-items-center">
                                             <div class="dropdown">
                                                <span class="dropdown-toggle text-primary" id="dropdownMenuButton40" data-toggle="dropdown">
                                                   <i class="ri-more-2-line"></i>
                                                </span>
                                                <div class="dropdown-menu dropdown-menu-right" style="">
                                                   <a class="dropdown-item" href="#"><i class="ri-user-unfollow-line mr-2"></i>Unfollow</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-close-circle-line mr-2"></i>Unfriend</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-lock-line mr-2"></i>block</a>
                                                </div>
                                             </div>
                                          </div>
                                       </li>
                                       <li class="d-flex mb-4 align-items-center">
                                          <div class="user-img img-fluid"><img src="images/user/01.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                          <div class="media-support-info ml-3">
                                             <h6>Paul Molive</h6>
                                             <p class="mb-0">trainee</p>
                                          </div>
                                          <div class="iq-card-header-toolbar d-flex align-items-center">
                                             <div class="dropdown">
                                                <span class="dropdown-toggle text-primary" id="dropdownMenuButton41" data-toggle="dropdown">
                                                <i class="ri-more-2-line"></i>
                                                </span>
                                                <div class="dropdown-menu dropdown-menu-right" style="">
                                                   <a class="dropdown-item" href="#"><i class="ri-user-unfollow-line mr-2"></i>Unfollow</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-close-circle-line mr-2"></i>Unfriend</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-lock-line mr-2"></i>block</a>
                                                </div>
                                             </div>
                                          </div>
                                       </li>
                                       <li class="d-flex mb-4 align-items-center">
                                          <div class="user-img img-fluid"><img src="images/user/02.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                          <div class="media-support-info ml-3">
                                             <h6>Anna Mull</h6>
                                             <p class="mb-0">Web Developer</p>
                                          </div>
                                          <div class="iq-card-header-toolbar d-flex align-items-center">
                                             <div class="dropdown">
                                                <span class="dropdown-toggle text-primary" id="dropdownMenuButton42" data-toggle="dropdown">
                                                <i class="ri-more-2-line"></i>
                                                </span>
                                                <div class="dropdown-menu dropdown-menu-right" style="">
                                                   <a class="dropdown-item" href="#"><i class="ri-user-unfollow-line mr-2"></i>Unfollow</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-close-circle-line mr-2"></i>Unfriend</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-lock-line mr-2"></i>block</a>
                                                </div>
                                             </div>
                                          </div>
                                       </li>
                                       <li class="d-flex mb-4 align-items-center">
                                          <div class="user-img img-fluid"><img src="images/user/03.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                          <div class="media-support-info ml-3">
                                             <h6>Paige Turner</h6>
                                             <p class="mb-0">trainee</p>
                                          </div>
                                          <div class="iq-card-header-toolbar d-flex align-items-center">
                                             <div class="dropdown">
                                                <span class="dropdown-toggle text-primary" id="dropdownMenuButton43" data-toggle="dropdown">
                                                <i class="ri-more-2-line"></i>
                                                </span>
                                                <div class="dropdown-menu dropdown-menu-right" style="">
                                                   <a class="dropdown-item" href="#"><i class="ri-user-unfollow-line mr-2"></i>Unfollow</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-close-circle-line mr-2"></i>Unfriend</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-lock-line mr-2"></i>block</a>
                                                </div>
                                             </div>
                                          </div>
                                       </li>
                                       <li class="d-flex mb-4 align-items-center">
                                          <div class="user-img img-fluid"><img src="images/user/04.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                          <div class="media-support-info ml-3">
                                             <h6>Barb Ackue</h6>
                                             <p class="mb-0">Web Designer</p>
                                          </div>
                                          <div class="iq-card-header-toolbar d-flex align-items-center">
                                             <div class="dropdown">
                                                <span class="dropdown-toggle text-primary" id="dropdownMenuButton44" data-toggle="dropdown">
                                                <i class="ri-more-2-line"></i>
                                                </span>
                                                <div class="dropdown-menu dropdown-menu-right" style="">
                                                   <a class="dropdown-item" href="#"><i class="ri-user-unfollow-line mr-2"></i>Unfollow</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-close-circle-line mr-2"></i>Unfriend</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-lock-line mr-2"></i>block</a>
                                                </div>
                                             </div>
                                          </div>
                                       </li>
                                       <li class="d-flex mb-4 align-items-center">
                                          <div class="user-img img-fluid"><img src="images/user/05.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                          <div class="media-support-info ml-3">
                                             <h6>Greta Life</h6>
                                             <p class="mb-0">Tester</p>
                                          </div>
                                          <div class="iq-card-header-toolbar d-flex align-items-center">
                                             <div class="dropdown">
                                                <span class="dropdown-toggle text-primary" id="dropdownMenuButton45" data-toggle="dropdown">
                                                <i class="ri-more-2-line"></i>
                                                </span>
                                                <div class="dropdown-menu dropdown-menu-right" style="">
                                                   <a class="dropdown-item" href="#"><i class="ri-user-unfollow-line mr-2"></i>Unfollow</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-close-circle-line mr-2"></i>Unfriend</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-lock-line mr-2"></i>block</a>
                                                </div>
                                             </div>
                                          </div>
                                       </li>
                                       <li class="d-flex mb-4 align-items-center">
                                          <div class="user-img img-fluid"><img src="images/user/06.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                          <div class="media-support-info ml-3">
                                             <h6>Ira Membrit</h6>
                                             <p class="mb-0">Android Developer</p>
                                          </div>
                                          <div class="iq-card-header-toolbar d-flex align-items-center">
                                             <div class="dropdown">
                                                <span class="dropdown-toggle text-primary" id="dropdownMenuButton46" data-toggle="dropdown">
                                                <i class="ri-more-2-line"></i>
                                                </span>
                                                <div class="dropdown-menu dropdown-menu-right" style="">
                                                   <a class="dropdown-item" href="#"><i class="ri-user-unfollow-line mr-2"></i>Unfollow</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-close-circle-line mr-2"></i>Unfriend</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-lock-line mr-2"></i>block</a>
                                                </div>
                                             </div>
                                          </div>
                                       </li>
                                       <li class="d-flex mb-4 align-items-center">
                                          <div class="user-img img-fluid"><img src="images/user/07.jpg" alt="story-img" class="rounded-circle avatar-40"></div>
                                          <div class="media-support-info ml-3">
                                             <h6>Pete Sariya</h6>
                                             <p class="mb-0">Web Designer</p>
                                          </div>
                                          <div class="iq-card-header-toolbar d-flex align-items-center">
                                             <div class="dropdown">
                                                <span class="dropdown-toggle text-primary" id="dropdownMenuButton47" data-toggle="dropdown">
                                                <i class="ri-more-2-line"></i>
                                                </span>
                                                <div class="dropdown-menu dropdown-menu-right" style="">
                                                   <a class="dropdown-item" href="#"><i class="ri-user-unfollow-line mr-2"></i>Unfollow</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-close-circle-line mr-2"></i>Unfriend</a>
                                                   <a class="dropdown-item" href="#"><i class="ri-lock-line mr-2"></i>block</a>
                                                </div>
                                             </div>
                                          </div>
                                       </li>
                                    </ul>
                                    <a href="javascript:void();" class="btn btn-primary d-block"><i class="ri-add-line"></i> Load More</a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
      <!-- Wrapper END -->
      <!-- Footer -->
      <footer class="bg-white iq-footer">
         <div class="container-fluid">
            <div class="row">
               <div class="col-lg-6">
                  <ul class="list-inline mb-0">
                     <li class="list-inline-item"><a href="./privacy-policy.html">Privacy Policy</a></li>
                     <li class="list-inline-item"><a href="./terms-of-service.html">Terms of Use</a></li>
                  </ul>
               </div>
               <div class="col-lg-6 text-right">
                  Copyright 2020 <a href="#">Vito</a> All Rights Reserved.
               </div>
            </div>
         </div>
      </footer>
      <!-- Footer END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="js/jquery.min.js"></script>
      <script src="js/popper.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <!-- Appear JavaScript -->
      <script src="js/jquery.appear.js"></script>
      <!-- Countdown JavaScript -->
      <script src="js/countdown.min.js"></script>
      <!-- Counterup JavaScript -->
      <script src="js/waypoints.min.js"></script>
      <script src="js/jquery.counterup.min.js"></script>
      <!-- Wow JavaScript -->
      <script src="js/wow.min.js"></script>
      <!-- Apexcharts JavaScript -->
      <script src="js/apexcharts.js"></script>
      <!-- Slick JavaScript -->
      <script src="js/slick.min.js"></script>
      <!-- Select2 JavaScript -->
      <script src="js/select2.min.js"></script>
      <!-- Owl Carousel JavaScript -->
      <script src="js/owl.carousel.min.js"></script>
      <!-- Magnific Popup JavaScript -->
      <script src="js/jquery.magnific-popup.min.js"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script src="js/smooth-scrollbar.js"></script>
      <!-- lottie JavaScript -->
      <script src="js/lottie.js"></script>
      <!-- Chart Custom JavaScript -->
      <script src="js/chart-custom.js"></script>
      <!-- Custom JavaScript -->
      <script src="js/custom.js"></script>
   </body>
</html>